<template>
  <div id="box">
    <h3>{{ id ? '编辑' : '创建'}}广告位</h3>
    <el-form @submit.native.prevent="save" label-width="100px">
      <el-form-item label="名称">
        <el-input v-model="model.name"/>
      </el-form-item>
      
      <el-form-item label="广告项">
        <el-button type="primary" size="mini" @click="addAd">
          <i class="el-icon-plus"></i>添加广告项
        </el-button>
        <el-row type="flex">
          <!-- 从 model.items 中遍历出item, 然后在 item 上赋值 -->
          <el-col :md="12" v-for="(item, index) in model.items" :key="index">
            <el-form-item label="跳转链接" size="mini">
              <el-input v-model="item.url"/>
            </el-form-item>
            <el-form-item label="图片">
              <el-upload
                  class="avatar-uploader"
                  :action="$http.defaults.baseURL + '/upload'"
                  :show-file-list="false"
                  :on-success="res => $set(item, 'image', res.url)">  
                  <!-- res => $set(item, 'image', res.url) 表示在 从 model.items遍历出来的 item 中添加 image, 值为 res.url -->
                <img v-if="item.image" :src="item.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" size="mini" @click="delAd(index)">删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'AdEdit',
    props: {
      id: {
        type: String,
      }
    },
    data() {
      return {
        model: {
          items: []
        },
      }
    },
    methods: {
      //修改 、 创建列表 
      async save() {
        try {
          let res
          // 修改分类
          if (this.id) {
            res = await this.$http.put(`/rest/ads/${this.id}`, this.model);
            this.$message({
              type: 'success',
              message: "修改成功"
            })
          } else {
            // 创建分类
            res = await this.$http.post('/rest/ads', this.model);
            this.$message({
              type: 'success',
              message: "创建成功"
            })
          }
          console.log(res);
          this.$router.push('/ads/list');
        } catch(err) {
          console.log(err);
        }
      },

      // 获取详情列表（某一个） 
      async fetch() {
        try {
          const res = await this.$http.get(`/rest/ads/${this.id}`);
          this.model = Object.assign({}, this.model, res.data);
        } catch(err) {
          console.log('修改列表失败');
        }
      },
      // 添加广告
      async addAd() {
        this.model.items.push({});
      },
      // 删除广告
      async delAd(index) {
        this.model.items.splice(index, 1);
      }
    },
    created() {
      this.id && this.fetch();
    }
  }
</script>

<style>
  
</style>